<template>
	<view>
		<nav-bar title="优惠劵" bgColor="#f5f5f5"></nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
			<view class="coupon_card" v-for="(item,index) of couponList" :key="index">
				<view class="up">
					<view class="left">
						<view class="coupon_card_priceinfo">
							<view>
								￥
								<text>{{item.priceDiscount}}</text>
							</view>
							<text>{{item.subtitle}}</text>
						</view>
						<view class="coupon_card_nameinfo">
							<text>{{item.title}}</text>
							<view>有效期限：{{item.effectiveDateStr || '长期有效'}}</view>
						</view>
					</view>
					<button @click="onJumpHome">使用</button>
				</view>
				<view class="down">
					<text>使用说明</text>
					<text class="close" @click="openIndex = 99999" v-if="index == openIndex">收回</text>
					<text class="open" @click="onOpenCoupon(index)" v-else>展开</text>
				</view>
				<view class="open_box" v-if="index == openIndex">
					<text>{{ item.instructions }}</text>
				</view>
			</view>
			<!-- <view class="coupon_card">
				<view class="up">
					<view class="left">
						<view class="coupon_card_priceinfo">
							<view>
								￥
								<text>3.0</text>
							</view>
							<text>优惠券</text>
						</view>
						<view class="coupon_card_nameinfo">
							<text>给你优惠</text>
							<view>有效期限：长期</view>
						</view>
					</view>
					<button @click="onJumpHome">使用</button>
				</view>
				<view class="down">
					<text>使用说明</text>
					<text class="open">展开</text>
				</view>
				<view class="open_box">
					
				</view>
			</view> -->
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				openIndex: 99999,
				couponList: [],
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
			};
		},
		//第一次加载
		onLoad(e) {},
		//页面显示
		onShow() {},
		//方法
		methods: {
			onJumpHome() {
				uni.switchTab({
					url: this.$base.homePath
				})
			},
			/*下拉刷新的回调 */
			downCallback() {
				//联网加载数据
				this.loadData(1);
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				this.loadData(page.num);
			},
			onOpenCoupon(index){
				this.openIndex = index;
			},
			loadData(pageNo) {
				let httpData = {
					pageNo: pageNo,
					pageSize: 15,
					useType: 1601
				};
				this.$http
					.post('api/mime/v1/discount_voucher_list', httpData, {
						load: false
					}).then(res => {
						uni.stopPullDownRefresh();
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)

						if (pageNo == 1) {
							this.couponList = res.data;
						} else {
							this.couponList = this.couponList.concat(res.data);
						}
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	page {
		//background: #fff;
	}

	.coupon_card {
		background-image: url('http://qn.kemean.cn/upload/202010/17/1602901596106mrn7rlbn.png');
		width: 690rpx;
		//height: 227rpx;
		background-position: top;
		background-size: 100% auto;
		border-radius: 8rpx;
		margin: 0 30rpx;
		margin-top: 24rpx;

		.up {
			max-height: 166rpx;
			padding: 20rpx 32rpx 37rpx 35rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;
			}

			>button {
				flex-shrink: 0;
				padding: 0 36rpx;
				height: 64rpx;
				@include theme('gradient_bg');
				border-radius: 32rpx;
				line-height: 64rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.down {
			display: flex;
			justify-content: space-between;
			padding: 14rpx 30rpx;

			text {
				font-size: 24rpx;
				color: #999999;
			}
			.open{
				display: flex;
				align-items: center;
				&::after{
					margin-left: 12rpx;
					content: '';
					@include bis('../../static/icon/ic_down.png');
					width: 24rpx;
					height: 24rpx;
				}
			}
			.close{
				display: flex;
				align-items: center;
				&::after{
					margin-left: 12rpx;
					content: '';
					@include bis('../../static/icon/ic_down.png');
					transform: rotate(180deg);
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.open_box{
			min-height: 60rpx;
			width: 100%;
			background-color: #fff;
			border-radius: 0 0 8rpx 8rpx;
			font-size: 24rpx;
			padding: 10rpx 30rpx;
			color: #999999;
		}

		.coupon_card_priceinfo {
			min-width: 130rpx;
			max-width: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			>view {
				font-size: 28rpx;
				color: #ff243b;

				>text {
					font-size: 60rpx;
					font-weight: bold;
				}
			}

			>text {
				font-size: 20rpx;
				color: #ff243b;
			}
		}

		.coupon_card_nameinfo {
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			margin-top: 16rpx;

			>text {
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 12rpx;
				font-weight: bold;
			}

			>view {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>
